<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .contain{
            width: 800px;
            height: 800px;
            margin: 50px auto;
            overflow: hidden;
            background-color: #fafafa;
            cursor: move;
            -webkit-perspective: 1200px;
            -moz-perspective: 1200px;
        }
        .contain ul{
            width: 100%;
            height: 100%;
            position: relative;
            list-style-type: none;
            margin: 0;
            padding: 0;
            -moz-transform-style:preserve-3d;
            -moz-transform-origin:50% 50% 0;
            -moz-backface-visibility:visiable;
            -webkit-transform-style:preserve-3d;
            -webkit-transform-origin:50% 50% 0;
            -webkit-backface-visibility:visiable;

            -webkit-transform: rotateX(-15deg) rotateY(15deg);
            -moz-transform:  rotateX(-15deg) rotateY(15deg);
        }
        .contain li{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 200px;
            top: 200px;
        }
        .contain p{
            margin: 0;
            text-align: center;
            line-height: 400px;
            font-size: 24px;
            color: #555;
            font-family: "微软雅黑";
        }
        /*前后*/
        .contain .front{
            -webkit-transform: rotateY(0) translateZ(200px);
            -moz-transform: rotateY(0) translateZ(200px);
            background-color: #9cf;
        }
        .contain .back{
            -webkit-transform: rotateY(180deg) translateZ(200px);
            -moz-transform: rotateY(180deg) translateZ(200px);
            background-color: #9fc;
        }
        /*上下*/
        .contain .top{
            -webkit-transform: rotateX(90deg) translateZ(200px);
            -moz-transform: rotateX(90deg) translateZ(200px);
            background-color: #fc9;
         }
        .contain .bottom{
            -webkit-transform: rotateX(-90deg) translateZ(200px);
            -moz-transform: rotateX(-90deg) translateZ(200px);
            background-color: #f9c;
        }
        /*前后*/
        .contain .left{
            -webkit-transform: rotateY(-90deg) translateZ(200px);
            -moz-transform: rotateY(-90deg) translateZ(200px);
            background-color: #cf9;
        }
        .contain .right{
            -webkit-transform: rotateY(90deg) translateZ(200px);
            -moz-transform: rotateY(90deg) translateZ(200px);
            background-color: #c9f;
        }

    </style>

</head>
<body>
    <div class="contain" id="contain">
        <ul>
            <li class="front"><p>前</p></li>
            <li class="back"><p>后</p></li>
            <li class="top"><p>上</p></li>
            <li class="bottom"><p>下</p></li>
            <li class="left"><p>左</p></li>
            <li class="right"><p>右</p></li>
        </ul>
    </div>

    <script type="text/javascript">
        var contain = document.getElementById("contain");
        var ul = contain.getElementsByTagName("ul")[0];
        var mouse = {                                            //鼠标对象
            is_down: false,                                      //是否按下
            X: 0,                                                 //
            Y: 0
        };
        var temp = {
            X: 0,
            Y: 0
        };
        var rotate = {
            X: -15,
            Y: 15
        };
        contain.onmousedown = function(e){
            mouse.is_down = true;
            mouse.X = e.clientX;
            mouse.Y = e.clientY;
            e.preventDefault();
        };
        window.onmouseup = function(){
            mouse.is_down = false;
            rotate.X = temp.X;
            rotate.Y = temp.Y;
            e.preventDefault();
        };
        contain.onmousemove = function(e){
            e.preventDefault();
            if(mouse.is_down){
                var x = Math.ceil((e.clientX - mouse.X) / 800 * 180), y = Math.ceil((e.clientY - mouse.Y) / 800 * 180);
                temp.X = rotate.X - y;
                temp.Y = rotate.Y + x;
                ul.style.webkitTransform =  "rotateX(" + temp.X + "deg) rotateY(" + temp.Y +"deg)";
                ul.style.mozTransform =  "rotateX(" + temp.X + "deg) rotateY(" + temp.Y +"deg)";
            }
        };


    </script>
</body>
</html>